<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-select.css" rel="stylesheet">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/JyyCommon.css" rel="stylesheet">
<link href="../css/JyyTable.css" rel="stylesheet">
<link href="../css/JyyTree.css" rel="stylesheet">
<link href="../css/JyyMsgBox.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<script type="text/javascript" src="../js/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
<script type="text/javascript" src="../js/jyy_modal.js"></script>
<script type="text/javascript" src="../js/JyyCommon.js"></script>
<script type="text/javascript" src="../js/JyyTable.js"></script>
<script type="text/javascript" src="../js/JyyTree.js"></script>
<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
<script type="text/javascript" src="../js/JyyLoading.js"></script>
<script type="text/javascript" src="../js/echarts-4.9.0.js"></script>
<script type="text/javascript" src="../js/echarts-liquidfill.js"></script>
<script type="text/javascript" src="../../utils/CommonUtil.js"></script>
<script type="text/javascript">
	var tree = null;
	var projectId =  getQueryString("projectId")||'88888888888';
	$(function(){
		getSelectDatas();
		selectData();
	});
	function selectData(){
		var yearSel =  $('#yearSel').val(); 
		if(JyyCommon.isEmpty(yearSel)){
			JyyMsgBox.alert({ title:"警告", message:"[年份]不可为空",type:"warning"}).on(function (e) {});
			return false;
		}
		JyyModelLoading.start("liquidDiv");
		$.when(getEcahtData(yearSel, "selectLiquidEchatData1")).done(function(echatData){
			createLiqEchat(echatData.respData.lightRatio, 0);
			createLiqEchat(echatData.respData.windRatio, 1);
			createLiqEchat(echatData.respData.waterRatio, 2);
			createLiqEchat(echatData.respData.energyRatio, 3);
			JyyModelLoading.end("liquidDiv");
		});
		JyyModelLoading.start("powerRejecEchartDiv");
		$.when(getEcahtData(yearSel, "selectpowerRejecEchatData1")).done(function(echatData){
			createEchat(echatData.respData, 1);
			JyyModelLoading.end("powerRejecEchartDiv");
		});
		JyyModelLoading.start("powerRatioEchartDiv");
		$.when(getEcahtData(yearSel, "selectpowerRatioEchatData1")).done(function(echatData){
			createEchat(echatData.respData, 2);
			JyyModelLoading.end("powerRatioEchartDiv");
		});

		/* JyyModelLoading.start("powerLossEchartDiv");
		$.when(getEcahtData(yearSel, "selectpowerLossData")).done(function(data){
			//createTable(data.tableData, 1);
			createEchat(data.echatData, 3);
			JyyModelLoading.end("powerLossEchartDiv");
		}); */
	}

	function createEchat(echartData, code) {
		var id = "";
		var option = {};
		var xAxisName = "月份";
		var seriesData = [];
		var yAxisData = [];
		var csvName = "echartData";
		if(code == 1) {
			id = "powerRejecEchart";
			csvName = "新能源弃电情况";
			seriesData.push({
				name: "弃光电量",
				type: 'bar',
				stack: "总量",
				itemStyle: {
					color: "#FFBD00"
				},
			    data: echartData.disLight
			},{
				name: "弃风电量",
				type: 'bar',
				stack: "总量",
				itemStyle: {
					color: "#7DD259"
				},
			    data: echartData.disWind
			},{
				name: "弃水电量",
				type: 'bar',
				stack: "总量",
				itemStyle: {
					color: "#00B3F1"
				},
			    data: echartData.disWater
			},{
				name: "弃电率",
				type: 'line',
			    yAxisIndex: 1,
				itemStyle: {
					color: "#8563A1",
				},
				symbol: 'circle',
			    data: echartData.energyRatio
			});
			yAxisData.push({
		      	type: 'value',
		      	name: "亿kWh",
		        position: 'left',
		        alignTicks: true
			},{
		      	type: 'value',
		      	name: "%",
		        position: 'right',
		        alignTicks: true
			});
		} else if(code == 2) {
			id = "powerRatioEchart";
			csvName = "新能源弃电率";
			seriesData.push({
				name: "弃光率",
				type: 'line',
				itemStyle: {
					color: "#FFBD00"
				},
				symbol: 'circle',
			    data: echartData.disLight
			},{
				name: "弃风率",
				type: 'line',
				itemStyle: {
					color: "#7DD259"
				},
				symbol: 'circle',
			    data: echartData.disWind
			},{
				name: "弃水率",
				type: 'line',
				itemStyle: {
					color: "#00B3F1"
				},
				symbol: 'circle',
			    data: echartData.disWater
			});
			yAxisData.push({
		      	type: 'value',
		      	name: "%"
			});
		} else if(code == 3) {
			id = "powerLossEchart";
			seriesData.push({
				name: "弃光损失",
				type: 'bar',
				itemStyle: {
					color: "#FFBD00"
				},
			    data: echartData.disLight
			},{
				name: "弃风损失",
				type: 'bar',
				itemStyle: {
					color: "#7DD259"
				},
			    data: echartData.disWind
			},{
				name: "弃水损失",
				type: 'bar',
				itemStyle: {
					color: "#00B3F1"
				},
			    data: echartData.disWater
			});
			yAxisData.push({
		      	type: 'value',
		      	name: "亿元"
			});
		}
		var xAxisData = echartData.xAxis;
		option = {
		  	tooltip: {
		    	trigger: 'axis',
		    	axisPointer: {
		      		type: 'cross',
		      		label: {
		        		backgroundColor: '#6a7985'
		      		}
		    	},
		    	position: function(point, params, dom, rect, size) {
		             //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
		             var x = point[0]; //
		             var y = point[1];
		             var viewWidth = size.viewSize[0];
		             var viewHeight = size.viewSize[1];
		             var boxWidth = size.contentSize[0];
		             var boxHeight = size.contentSize[1];
		             var posX = 0; //x坐标位置
		             var posY = 0; //y坐标位置

		             if (x < boxWidth) { //左边放不开
		                 posX = 5;
		             } else { //左边放的下
		                 posX = x - boxWidth;
		             }

		             if (y < boxHeight) { //上边放不开
		                 posY = 5;
		             } else { //上边放得下
		                 posY = y - boxHeight;
		             }

		             return [posX, posY];
		         }
		  	},
			toolbox: {
				show: true,
				right: 30,
			    itemSize: 20,
				itemGap: 12,
		        feature: {
		        	myTool: {
		        		show: true,
		        		title: "导出为Excel",
		        		icon: 'image://../images/excel.png',
		        		onclick: (o) => {
							var option = o.option;
							var dataSource = [];
							var dataType = "\uFEFF"; //解决乱码问题
							dataType += option.xAxis[0].name+",";  //添加表格的头
							if(option.series.length > 0) {
								for(var i = 0;i < option.series.length;i++) {
									dataType += option.series[i].name+","
								}
								dataType = dataType.substr(0, dataType.length-1)
							}
							dataType += '\n'; // 以上是导出的Excel文件头部

							for(var i = 0;i < option.xAxis[0].data.length;i++) {
								var arr = [];
								for(var j = 0;j < option.series.length+1;j++) {
									if(j == 0) {
										arr.push(option.xAxis[0].data[i]);
									} else {
										arr.push(option.series[j-1].data[i]);
									}
								}
								dataSource.push(arr);
							}
							// 从dataSource中取出数据存入数据源（dataType）
							dataSource.map(item => dataType += `${item.join(',')}\n`); 
							// 使用Blob，获得二进制实例
							const csvData = new Blob([dataType], {
							    type: 'text/csv'
							});
							// 创建a标签
							const _a = document.createElement('a');
							_a.href = URL.createObjectURL(csvData);
							_a.target = '_blank';
							_a.download = csvName + `.csv`;
							document.body.appendChild(_a);
							_a.click();
							document.body.removeChild(_a);
	                   	},
		        	},
		        	saveAsImage: {name:csvName,icon:"image://../images/downpic.png"}
		        }
		    },
		  	grid: {
		    	left: '3%',
		    	right: '4%',
		    	bottom: '3%',
		    	containLabel: true
		  	},
		  	xAxis: [{
		    	type: 'category',
		    	name: xAxisName,
		      	data: xAxisData
		    }],
		  	yAxis: yAxisData,
			legend: {},
		  	series: seriesData
		};
		var chartDom = document.getElementById(id);
		var myChart = echarts.init(chartDom);
		myChart.clear();
		myChart.setOption(option);
		window.addEventListener("resize", () => {
			if(myChart){
				myChart.resize()
			}
		})
	}
	function createLiqEchat(echartData, code) {
		var id = "PvLiq";
		var color = "#FFBF00";
		if(code == 1) {
			id = "windLiq";
			color = "#7DD259";
		} else if(code == 2) {
			id = "waterLiq";
			color = "#00B6F1";
		} else if(code == 3) {
			id = "eleLiq";
			color = "#F86400";
		}
		var chartDom = document.getElementById(id);
		var myChart = echarts.init(chartDom);
		var option = {
			series: [{
			    type: "liquidFill",
			    data: [echartData],
				radius: "90%",
				color: [color],
				label: {
					formatter: function (params) {
						var x = toFixed(params.value*100, 2);
			        	return x + '%';
		            },
					fontSize: 20,
		            fontWeight: "bold",
				},
				outline: {// 水球外侧边框
		            show: true, 
		            borderDistance: 3,
		            itemStyle: {
		              borderColor: "#00B359",
		              borderWidth: 3,
		              shadowBlur: 10,
		              shadowColor: "rgba(0, 0, 0, 0.25)",
		            },
		    	},
			}],
		};
		myChart.clear();
		myChart.setOption(option);
	}
	
	// 表格

	function createTable(tableData, code) {
		var id = "";
		var table = {};
		tableData.columnsList[0].cellStyle = function(value,row,index){
			return { classes:"bg-primary" };
		};
		if(code == 1) {
			id = "powerLossTable";
			table = {
		    	cache: false,
		    	fixedColumns:true,
		        fixedNumber:1,
		        theadClasses: "bg-primary",
		    	columns: tableData.columnsList,
		    	data: tableData.dataList,
		    	onClickCell: function(field, value, row, $element) {
		            $element.attr('contenteditable', true);
		            $element.blur(function() {
		                let index = $element.parent().data('index');
		                let tdValue = $element.html();
		                saveData(index, field, tdValue);
		            })
		        }
		    };
		}
		$('#'+id).bootstrapTable('destroy').bootstrapTable(table);
		function saveData(index, field, value) {
			$('#'+id).bootstrapTable('updateCell', {
	            index: index,       //行索引
	            field: field,       //列名
	            value: value        //cell值
	        })
	    }
		var div = document.getElementById(id).parentNode;
		if (div.scrollWidth <= div.clientWidth) {
			div.parentNode.removeChild(div.parentNode.getElementsByClassName("fixed-columns")[0]);
		}
	}
	
	function saveTable() {
		var map = {};
		map = $("#powerLossTable").bootstrapTable("getData");
		map[0].projectId = projectId;
		map[0].yearSel = $("#yearSel").val();
		$.ajax({
			url: "../g/service/Sample/updateEnergyTableData1",
			type:'POST',
			async:false,
			dataType: "json",
			data:JSON.stringify(map[0]),
			contentType:"application/json",
	        success:function(){
	    		JyyModelLoading.start("powerLossEchartDiv");
	    		$.when(getEcahtData($("#yearSel").val(), "selectpowerLossData1")).done(function(data){
	    			createEchat(data.echatData, 3);
	    			JyyModelLoading.end("powerLossEchartDiv");
	    		});
	        }
		});
	}
	
	//查询
	function select(){
		getTotalDatas($("#yearSel").val());
		selectData();
	}

	function getQueryString (name){
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		return r ? unescape(r[2]) : null;
	}
	
	function toFixed(number,len){
	  //需要n位小数就乘以n倍
	  const ceil = Math.pow(10,len);
	  //加0.5是为了四舍五入
	  const intNum = number*ceil+0.5;
	  //再除以n倍
	  const result = parseInt(intNum,10)/ceil;
	  return result
	}

	function getSelectDatas(){
		$.ajax({
			url: "Sample/getEnergyYear1",
			type:'POST',
			async:false,
			dataType: "json",
			data:JSON.stringify({ projectId : projectId }),
			contentType:"application/json",
	        success:function(data){
				var content = '';
				$.each(data.respData.iyear,function(i,n){
					content += "<option value='" + n + "'>"+ n+"</option>";
				});
				$("#yearSel").html(content);
				$('.selectpicker').selectpicker('refresh');
				getTotalDatas($("#yearSel").val());
	        }
		});
	}

	function getTotalDatas(yearSel){
		$.ajax({
			url: "Sample/getEnergyYearTotal1",
			type:'POST',
			async:false,
			dataType: "json",
			data:JSON.stringify({ projectId : projectId, yearSel:yearSel }),
			contentType:"application/json",
	        success:function(data){
				$("#pvCum").html(data.respData.disLight);
				$("#windCum").html(data.respData.disWind);
				$("#waterCum").html(data.respData.disWater);
				$("#eleCum").html(data.respData.disEnergy);
	        }
		});
	}
	
	function getEcahtData(yearSel, method){
		var res = $.ajax({
			url: "Sample/"+method,
			type:'POST',
			cache:false,
			dataType: "json",
			data:JSON.stringify({ projectId : projectId, yearSel:yearSel }),
			contentType:"application/json",
            success:function(data){
				return data;
            }
		});
		return res;
	}

	function invoke(url, args, callback){
		var r, op = {
				url: '../g/service/Sample/' + url,
				type:'POST',
				cache:false,
				async:true,
				dataType:'json',
				data:args ? JSON.stringify(args) : null,
				contentType:"application/json"
			};
		if(typeof callback == 'function'){
			op.success = function(data){
				if(data.error)return alert(data.error);
				callback(data);
			}
		} else {
			op.async = false;
			op.success = function(data){
				r = data
			};
		}
		$.ajax(op);
		if(r)if(r.error){
			alert(r.error);
			return null;
		}
		return r;
	};
</script>
<style type="text/css">
	body, html{
		width: 100%;
		height: 100%;
	}
	.selBtn {
		float:left;
		margin-left:20px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
	}
	.selBtn:hover {
		background-color: #00BFFF;
	}
	.shadow {
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
		margin-left: 20px;
		margin-bottom: 20px;
	}
	.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
		float: left;
	}
	.cumCard {
		margin-left: 10px;
		width: 250px;
		height: 120px;
		display : inline-block;
		margin-top: 10px;
	}
	.amount {
		width: 170px;
		height: 50px;
		margin-top: 20px;
		display: inline-block;
	}
	.val {
		width: 65px;
		display: inline-block;
    	font-size: 18px;
	    font-weight: bolder;
	    color: #00CFFF;
	    text-align: right;
	    margin: 10px;
	}
	#cumulativeDiv::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.1);
        outline-color: #ccc;
    }
	.liqCard {
		margin-left: 50px;
		margin-right: 30px;
		width: 190px;
		height: 150px;
		display : inline-block;
		margin-top: 10px;
	}
</style>
</head>
<body>
<div style="overflow-y: auto;width: 100%;height: 100%;">
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">年</label>
			<select class="form-control" id="yearSel" style="float: left;margin-top: -3px;padding: 5px;width: 120px;font-weight: normal;"></select>

			<button class="selBtn" onclick=select()>查询</button>
		</div>
	</div>
	<div id="yearRenewable" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">年度可再生能源消纳分析</span>
		</p>
		<div id="cumulativeDiv" style="width: 100%;height: 150px;margin-top: 20px;white-space:nowrap;overflow-x:scroll;overflow-y:hidden;">
			<div class="cumCard">
				<div class="amount">
					<div class="val" id="pvCum">0</div>
					<div style="display: inline-block;">亿千瓦时</div>
				</div>
				<div style="display: inline-block;"><img src="../images/pvPower.png" style="width: 60px;height: 60px;"></div>
				<p style="font-size: 18px;margin: 0px;margin-top: 10px;text-align: center;">累计弃光电量</p>
			</div>
			<div class="cumCard">
				<div class="amount">
					<div class="val" id="windCum">0</div>
					<div style="display: inline-block;">亿千瓦时</div>
				</div>
				<div style="display: inline-block;"><img src="../images/windPower.png" style="width: 60px;height: 60px;"></div>
				<p style="font-size: 18px;margin: 0px;margin-top: 10px;text-align: center;">累计弃风电量</p>
			</div>
			<div class="cumCard">
				<div class="amount">
					<div class="val" id="waterCum">0</div>
					<div style="display: inline-block;">亿千瓦时</div>
				</div>
				<div style="display: inline-block;"><img src="../images/waterPower.png" style="width: 60px;height: 60px;"></div>
				<p style="font-size: 18px;margin: 0px;margin-top: 10px;text-align: center;">累计弃水电量</p>
			</div>
			<div class="cumCard">
				<div class="amount">
					<div class="val" id="eleCum">0</div>
					<div style="display: inline-block;">亿千瓦时</div>
				</div>
				<div style="display: inline-block;"><img src="../images/cumYearPower.png" style="width: 60px;height: 60px;"></div>
				<p style="font-size: 18px;margin: 0px;margin-top: 10px;text-align: center;">累计弃电量</p>
			</div>
		</div>
		<div id="liquidDiv" style="width: 100%;height: 180px;margin-top: 20px;white-space:nowrap;overflow-x:scroll;overflow-y:hidden;">
			<div class="liqCard">
				<div style="display: inline-block;width: 60px;font-size: 16px;">弃光率</div>
				<div id="PvLiq" style="display: inline-block;width: calc(100% - 60px);height: 130px;"></div>
			</div>
			<div class="liqCard">
				<div style="display: inline-block;width: 60px;font-size: 16px;">弃风率</div>
				<div id="windLiq" style="display: inline-block;width: calc(100% - 60px);height: 130px;"></div>
			</div>
			<div class="liqCard">
				<div style="display: inline-block;width: 60px;font-size: 16px;">弃水率</div>
				<div id="waterLiq" style="display: inline-block;width: calc(100% - 60px);height: 130px;"></div>
			</div>
			<div class="liqCard">
				<div style="display: inline-block;width: 60px;font-size: 16px;">弃电率</div>
				<div id="eleLiq" style="display: inline-block;width: calc(100% - 60px);height: 130px;"></div>
			</div>
		</div>
	</div>
	<div id="powerRejecEchartDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">新能源弃电情况</span>
		</p>
		<div id="powerRejecEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
	<div id="powerRatioEchartDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">新能源弃电率</span>
		</p>
		<div id="powerRatioEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
	
	<!-- <div id="powerLossEchartDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">新能源弃电损失情况</span>
		</p>
		<div class="table-box" style="margin-top: 20px;width: 100%;">
		    <div id="toolbar">
		        <button id="save" class="selBtn" onclick="saveTable()">保存</button>
		    </div>
		    <table id="powerLossTable" style="width: 600px;margin-left: 20px;margin-top: 10px;"></table>
		</div>
		<div id="powerLossEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div> -->
</div>
</body>
</html>